<template>
  <div class="c-auth-data">
    <c-row-search>
      <c-row margin>
        <c-col>
          <el-input
            v-model="keyword"
            @keyup.enter.native="search"
            clearable
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </c-col>
        <c-col>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
        </c-col>
      </c-row>
      <template #right>
        <c-row-view-opn
          type="primary"
          :auth="true"
          :visible.sync="visibles.edit"
          @cancel="cancel"
          @save="submit"
        >
        </c-row-view-opn>
      </template>
    </c-row-search>
    <c-table height="calc(100% - 56px)" :data="filterData">
      <el-table-column
        :label="multLang('text_bb')"
        align="center"
        prop="label"
        width="200"
      >
      </el-table-column>
      <el-table-column :label="multLang('text_be')">
        <template slot-scope="{ row }">
          <el-checkbox
            v-model="row.all"
            @change="selectAll($event, row)"
            :disabled="!visibles.edit"
          >
            {{ multLang('title_m') }}
          </el-checkbox>
          <br />
          <c-cascader
            v-model="row.select"
            multiple
            :options="row.data"
            :placeholder="multLang('text_d')"
            :disabled="!visibles.edit"
            class="c-auth-data-select"
            @change="change($event, row)"
          ></c-cascader>
        </template>
      </el-table-column>
    </c-table>
  </div>
</template>
<script>
import { selectAuthData } from '@/http/api/v1/auth'
import { searchWord } from '@/util/data'
const selectAllValue = data =>
  data.reduce((arr, { value, children }) => {
    arr.push(value)
    children && arr.push(...selectAllValue(children))
    return arr
  }, [])

export default {
  name: 'CAuthData',
  components: {},
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      visibles: { edit: false },
      keyword: '',
      form: {
        assetPositionIds: [],
        assetCategoryIds: [],
        workTypeRoleIds: []
      },
      filterData: []
    }
  },
  computed: {},
  watch: {
    data: {
      deep: true,
      handler() {
        this.search()
      }
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.filterData = searchWord(this.keyword, this.data, 'label')
    },
    selectAll(val, row) {
      row.select = val ? selectAllValue(row.data) : []
      this.form[row.type] = row.select
    },
    change(val, row) {
      row.all = val.length === row.count
    },
    cancel() {
      this.visibles.edit = false
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    submit() {
      const { id } = this.info
      if (id) {
        this.data.forEach(({ type, select }) => {
          this.form[type] = select
        })
        selectAuthData({ id, ...this.form }).then(() => {
          this.visibles.edit = false
        })
      }
    }
  }
}
</script>
<style lang="scss">
.c-auth-data {
  height: 100%;
  &-select {
    width: 260px;
  }
}
</style>
